<template>
  <div class="map" ref="mapChart"></div>
</template>

<script>
import chinaMap from '@/assets/json/china.json';
import throttle from '@/utils/throttle.js';
import * as echarts from 'echarts/core';
import { VisualMapComponent, GeoComponent } from 'echarts/components';
import { LinesChart, EffectScatterChart, ScatterChart } from 'echarts/charts';
import { fitChartSize } from '@/utils/echartUtils.js';

echarts.use([
  VisualMapComponent,
  GeoComponent,
  LinesChart,
  EffectScatterChart,
  ScatterChart,
]);
var chinaGeoCoordMap = {
  // 黑龙江: [127.9688, 45.368],
  // 内蒙古: [110.3467, 41.4899],
  // 吉林: [125.8154, 44.2584],
  // 北京市: [116.4551, 40.2539],
  // 辽宁: [123.1238, 42.1216],
  // 河北: [114.4995, 38.1006],
  // 天津: [117.4219, 39.4189],
  // 山西: [112.3352, 37.9413],
  // 陕西: [109.1162, 34.2004],
  // 甘肃: [103.5901, 36.3043],
  // 宁夏: [106.3586, 38.1775],
  // 青海: [101.4038, 36.8207],
  // 新疆: [87.9236, 43.5883],
  // 西藏: [91.11, 29.97],
  // 四川: [103.9526, 30.7617],
  // 重庆: [108.384366, 30.439702],
  // 山东: [117.1582, 36.8701],
  // 河南: [113.4668, 34.6234],
  // 江苏: [118.8062, 31.9208],
  // 安徽: [117.29, 32.0581],
  // 湖北: [114.3896, 30.6628],
  // 浙江: [119.5313, 29.8773],
  // 福建: [119.4543, 25.9222],
  // 江西: [116.0046, 28.6633],
  // 湖南: [112.94547, 28.23489],
  // 贵州: [106.6992, 26.7682],
  // 云南: [102.9199, 25.4663],
  // 广东: [113.12244, 23.009505],
  // 广西: [108.479, 23.1152],
  // 海南: [110.3893, 19.8516],
  // 上海: [121.4648, 31.2891],
};
var chinaDatas = [
  // [{ name: '黑龙江', value: 0 }],
  // [{ name: '内蒙古', value: 0 }],
  // [{ name: '吉林', value: 0 }],
  // [{ name: '辽宁', value: 0 }],
  // [{ name: '河北', value: 0 }],
  // [{ name: '天津', value: 0 }],
  // [{ name: '山西', value: 0 }],
  // [{ name: '陕西', value: 0 }],
  // [{ name: '甘肃', value: 0 }],
  // [{ name: '宁夏', value: 0 }],
  // [{ name: '青海', value: 0 }],
  // [{ name: '新疆', value: 0 }],
  // [{ name: '西藏', value: 0 }],
  // [{ name: '四川', value: 0 }],
  // [{ name: '重庆', value: 0 }],
  // [{ name: '山东', value: 0 }],
  // [{ name: '河南', value: 0 }],
  // [{ name: '江苏', value: 0 }],
  // [{ name: '安徽', value: 0 }],
  // [{ name: '湖北', value: 0 }],
  // [{ name: '浙江', value: 0 }],
  // [{ name: '福建', value: 0 }],
  // [{ name: '江西', value: 0 }],
  // [{ name: '湖南', value: 0, label: { color: '#f00' } }],
  // [{ name: '湖北', value: 0, label: { color: '#f00' } }],
  // [{ name: '贵州', value: 0 }],
  // [{ name: '广西', value: 0 }],
  // [{ name: '海南', value: 0 }],
  // [{ name: '上海', value: 1 }],
];

// var convertData = function (data) {
//   var res = [];
//   for (var i = 0; i < data.length; i++) {
//     var dataItem = data[i];
//     var fromCoord = chinaGeoCoordMap[dataItem[0].name];
//     var toCoord = [116.4551, 40.2539];
//     if (fromCoord && toCoord) {
//       res.push([
//         {
//           coord: fromCoord,
//           value: dataItem[0].value,
//         },
//         {
//           coord: toCoord,
//         },
//       ]);
//     }
//   }
//   return res;
// };

var series = [];
[[chinaDatas]].forEach(function (item) {
  series.push(
    // {
    //   type: 'lines',
    //   zlevel: 2,
    //   effect: {
    //     show: true,
    //     period: 4, // 箭头指向速度，值越小速度越快
    //     trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
    //     symbol: 'arrow', // 箭头图标
    //     symbolSize: 5, // 图标大小
    //   },
    //   lineStyle: {
    //     width: 1, // 尾迹线条宽度
    //     opacity: 1, // 尾迹线条透明度
    //     curveness: 0.3, // 尾迹线条曲直度
    //   },
    //   data: convertData(item[1]),
    // },
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      // rippleEffect: {
      //   // 涟漪特效
      //   period: 2, // 动画时间，值越小速度越快
      //   brushType: 'stroke', // 波纹绘制方式 stroke, fill
      //   scale: 20, // 波纹圆环最大限制，值越大波纹越大
      // },
      label: {
        show: false,
        position: 'right', // 显示位置
        offset: [5, 0], // 偏移设置
        formatter: function (params) {
          // 圆环显示文字
          return params.data.name;
        },
        fontSize: 13,
      },
      emphasis: {
        disabled: false, //取消鼠标经过高亮
        itemStyle: {
          areaColor: '#31C6BC',
        },
      },
      // symbol: 'circle',
      // symbolSize: function () {
      //   return 15; // 圆环大小
      // },
      // itemStyle: {
      //   show: false,
      //   color: '#f00',
      // },
      data: item[0].map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
          label: {
            color: '#fff',
          },
        };
      }),
    }
    // 被攻击点
    // {
    //   type: 'scatter',
    //   coordinateSystem: 'geo',
    //   zlevel: 2,
    //   rippleEffect: {
    //     period: 4,
    //     brushType: 'stroke',
    //     scale: 4,
    //   },
    //   label: {
    //     show: true,
    //     position: 'right',
    //     // offset:[5, 0],
    //     color: '#0f0',
    //     formatter: '{b}',
    //   },
    //   emphasis: {
    //     label: {
    //       show: true,
    //       color: '#f60',
    //     },
    //   },
    //   symbol: 'pin',
    //   symbolSize: 50,
    //   data: [
    //     {
    //       name: item[0],
    //       value: chinaGeoCoordMap[item[0]].concat([10]),
    //     },
    //   ],
    // }
  );
});

export default {
  data: () => ({
    intanceChart: null,
  }),
  mounted() {
    this.initCahrt();
  },
  methods: {
    initCahrt() {
      this.intanceChart = echarts.init(this.$refs.mapChart);
      const option = {
        layoutSize: '95%', //大小
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: 'z-index:100',
          fontSize: fitChartSize(12),
          textStyle: {
            color: '#fff',
          },
          formatter: function (params) {
            // 根据业务自己拓展要显示的内容
            var res = '';
            var name = params.name;
            // var value = params.value[params.seriesIndex + 1];
            res =
              "<span style='color:#fff;'>" +
              name +
              '</span><br/>该队列建于2016年，从花垣县起（红色），<br/>涉及湖南省4个市（花垣县、常德市石门县、<br/>衡阳市水口山镇、株洲市清水塘社区居民），<br/>共计3952人';
            return res;
          },
        },
        backgroundColor: 'rgba(37, 43, 61, 0)',
        geo: {
          map: 'china',
          zoom: 1.2,
          label: {
            normal: {
              color: 'rgba(255,255,255,1)',
              // formatter: '{b}',
              position: [-12, -1],
              show: false,
            },
            emphasis: {
              //鼠标移入时显示的默认样式,也就是鼠标移上去，显示该地区的地名，可具体设置样式，也可不显示
              show: false,
            },
          },
          // regions: [
          //   {
          //     name: '湖南省', //与china.js对应的省份名称
          //     itemStyle: {
          //       areaColor: 'red', //省份背景色
          //     },
          //   },
          //   {
          //     name: '广西壮族自治区', //与china.js对应的省份名称
          //     itemStyle: {
          //       areaColor: '#1ec76a', //省份背景色
          //     },
          //   },
          //   {
          //     name: '湖北省', //与china.js对应的省份名称
          //     itemStyle: {
          //       areaColor: '#1ec76a', //省份背景色
          //     },
          //   },
          //   {
          //     name: '上海市', //与china.js对应的省份名称
          //     itemStyle: {
          //       areaColor: '#1ec76a', //省份背景色
          //     },
          //   },
          //   {
          //     name: '北京市', //与china.js对应的省份名称
          //     itemStyle: {
          //       areaColor: '#1ec76a', //省份背景色
          //     },
          //   },
          //   {
          //     name: '贵州省', //与china.js对应的省份名称
          //     itemStyle: {
          //       areaColor: '#f4f4f3', //省份背景色
          //     },
          //   },
          //   {
          //     name: '青海省', //与china.js对应的省份名称
          //     itemStyle: {
          //       areaColor: '#f4f4f3', //省份背景色
          //     },
          //   },
          //   {
          //     name: '甘肃省', //与china.js对应的省份名称
          //     itemStyle: {
          //       areaColor: '#f4f4f3', //省份背景色
          //     },
          //   },
          //   {
          //     name: '宁夏回族自治区', //与china.js对应的省份名称
          //     itemStyle: {
          //       areaColor: '#f4f4f3', //省份背景色
          //     },
          //   },
          //   {
          //     name: '内蒙古自治区', //与china.js对应的省份名称
          //     itemStyle: {
          //       areaColor: '#f4f4f3', //省份背景色
          //     },
          //   },
          //   {
          //     name: '台湾省', //与china.js对应的省份名称
          //     itemStyle: {
          //       areaColor: '#f4f4f3', //省份背景色
          //     },
          //   },
          // ],
          emphasis: {
            label: {
              show: true,
              fontSize: 60,
            },
            itemStyle: {
              color: 'rgba(37, 43, 61, .5)', // 悬浮背景
            },
          },
          roam: false, // 是否允许缩放
          itemStyle: {
            color: 'rgba(14, 43, 202, 0.1)', // 地图背景色
            borderColor: '#516a89', // 省市边界线00fcff 516a89
            borderWidth: fitChartSize(1),
          },
        },
        series: series,
      };
      echarts.registerMap('china', { geoJSON: chinaMap });
      option && this.intanceChart.setOption(option);
      this.screenAdapter();
    },
    // 适配屏幕(再屏幕尺寸改变的时候适配)
    screenAdapter() {
      window.addEventListener(
        'resize',
        throttle(this.changeChartFontSize, 100, 2)
      );
    },
    changeChartFontSize() {
      const option = {
        tooltip: {
          fontSize: fitChartSize(14),
          visualMap: {
            fontSize: fitChartSize(12),
          },
        },
      };
      this.intanceChart.setOption(option);
      this.intanceChart.resize();
    },
  },
};
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
}
</style>
